<template>
	<view>
		<view class="liu-search" id="TOP">
			<image class="liu-search-img" src="/uni_modules/liu-indexed-list/static/search.png"></image>
			<input class="liu-input"  v-model="searchStr" placeholder="搜索" maxlength="50"
				placeholder-class="liu-placeholder" />
		</view>
		<view v-if="searchStr!==''&&friendInfo===''">
			<uni-card :title="'搜索：'+searchStr"   :thumbnail="avatar" @click="search()">
			</uni-card>
		</view>
		<view v-if="friendInfo!==''" class="friendInfo">
			<view class="info">
				<image :src="friendInfo.user.avatar" class="avatar"></image>
				<text>{{ friendInfo.user.nickName }}</text>
			</view>
			<view style="height: 80upx;">
				<button v-if="friendInfo.status===0" >待验证</button>
				<button v-if="friendInfo.status===1" style="color: gray;" disabled="">已添加</button>
				<button v-if="friendInfo.status===2" style="color: red;" disabled="">已拒绝</button>
				<button v-if="friendInfo.status===3" @click="addFriends()">添加</button>
			</view>
		</view>


	</view>
</template>

<script>
import { addFriends, getFriends } from '@/api/contacts'
	export default {
		data() {
			return {
				searchStr: '',
				avatar:'/static/contacts/add.png',
				friendInfo:''
			}
		},
		methods: {
			search() {
				if (this.searchStr) {
					getFriends(this.searchStr).then(res=>{
						if(res.code===200){
							this.friendInfo=res.data

						}else{
							 reject(res.data.message || '未知错误');
						}
					})

				} else {
					// this.hasData = true
					// this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
				}
			},
			addFriends(){
				const params ={
					'userId':this.friendInfo.user.userId
				}

				addFriends(params).then(res=>{
					if(res.code===200){
						    uni.showToast({
						        title: '添加成功',
						        icon: 'success',
						        duration: 2000
						    });

					}else{
						 reject(res.data.message || '未知错误');
					}
				})

				uni.navigateBack();
			}

		}
	}
</script>

<style lang="scss">
				.liu-search {
					width: 100%;
					height: 106rpx;
					background-color: black;//搜索框
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.liu-search-img {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						left: 64rpx;
					}

					.liu-input {
						width: calc(100% - 64rpx);
						height: 72rpx;
						background: black;//搜索框
						border-radius: 36rpx;
						padding: 0 20rpx 0 80rpx;
						box-sizing: border-box;
						border: 1px solid darkgray;
						color: darkgray;
					}

					.liu-placeholder {
						color: darkgray;
					}
				}

				.friendInfo{
					display: flex;
					align-items: center;
					padding: 20upx;
					justify-content: space-between;
					background-color: $bg-color;

					.info{
						display: flex;
						align-items: center;

						text{
							color: white;
						}
					}

					.avatar{
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						border: 1px white solid;
						margin-right: 20upx;
					}

				}

</style>
